<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

import homeUrl from "./assets/imgs/home/tab-home.png";
import homeUrlactive from "./assets/imgs/home/tab-home-active.png";
import hotUrl from "./assets/imgs/home/tab-hot.png";
import hotUrlactive from "./assets/imgs/home/tab-hot-active.png";
import addUrl from "./assets/imgs/home/tab-add.png";
import msgUrl from "./assets/imgs/home/tab-msg.png";
import msgUrlactive from "./assets/imgs/home/tab-msg-active.png";
import myUrl from "./assets/imgs/home/tab-my.png";
import myUrlactive from "./assets/imgs/home/tab-my-active.png";
import { mainStore } from './store/main'

const router = useRouter();
const messageStore = mainStore()

const tabListUrl = ["/", "/hot", "/release", "/message", "/my"];
const tabList = [
  {
    id: 1,
    title: "首页",
    icon: homeUrl,
    activeIcon: homeUrlactive,
  },
  {
    id: 2,
    title: "热门",
    icon: hotUrl,
    activeIcon: hotUrlactive,
  },
  {
    id: 3,
    title: "发布",
    icon: addUrl,
    activeIcon: addUrl,
  },
  {
    id: 4,
    title: "消息",
    icon: msgUrl,
    activeIcon: msgUrlactive,
  },
  {
    id: 5,
    title: "我的",
    icon: myUrl,
    activeIcon: myUrlactive,
  },
];
const includeList = ref([]);

const checkTab = (index) => {
  messageStore.tabbar = index
  router.push(tabListUrl[index]);
};
const route = useRoute();

onMounted(() => {
  console.log(route,'route');
})
// 组件缓存
watch(
  () => route,
  (newVal, oldVal) => {
    if (
      newVal.meta.keepAlive &&
      includeList.value.indexOf(newVal.name) === -1
    ) {
      includeList.value.push(newVal.name);
      console.log(includeList, "includeList");
    }
  },
  { deep: true }
); // 开启深度监听
</script>

<template>
  <div class="app-conten">
    <router-view v-slot="{ Component }">
      <keep-alive :include="includeList">
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <van-tabbar
      v-model="messageStore.tabbar"
      active-color="#fedd2b"
      inactive-color="#000"
      @change="checkTab"
      v-if="route.meta.tabBar"
    >
      <van-tabbar-item
        icon="home-o"
        v-for="(item, index) in tabList"
        :key="index"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss" scoped>
.app-conten {
  width: 100vw;
}
</style>
